<template>
  <div id="app" >
    <componentHello></componentHello>
      <p v-for="(item,index) in list">
         {{ index }}  ->  hello : {{ item.name }}, age is {{ item.age }}
      </p>
      <p v-for="(item,key) in myObj">
          {{ key }} : {{ item }}
      </p>
      <p v-text="hello"></p>
      <p v-html="hello"></p>
  </div>
</template>

<script>
import componentHello from './components/HelloWorld.vue'
export default {
  components:{componentHello},
  name: 'App',
  data (){
      return{
          hello : '<span>hello vue of huey</span>',
          list : [
            {name:'huey1',
              age: 18
            },
            {name:'huey2',
              age: 28
            },
            {name:'huey3',
              age: 38
            },
          ],
          myObj : {
              name : 'objname',
              sex :  20
          }
      }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
